<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>介绍 | 在线文档</title>
    <meta name="description" content=" ">
    <link rel="stylesheet" href="/onlinedocx/assets/style.35b0e7b5.css">
    <link rel="modulepreload" href="/onlinedocx/assets/Home.57e6b460.js">
    <link rel="modulepreload" href="/onlinedocx/assets/app.a6a2ebb4.js">
    <link rel="modulepreload" href="/onlinedocx/assets/guide_introduction.md.3fa71234.lean.js">
    <link rel="modulepreload" href="/onlinedocx/assets/app.a6a2ebb4.js">
    <meta name="author" content="Archer">
    <meta name="keywords" content="vue-element-plus-admin, vitejs, vite, element-plus, vue">
    <link rel="icon" type="image/x-icon" href="/logo.png">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="keywords" content="online-doc">
    <link rel="icon" href="/logo.png">
    <meta name="twitter:title" content="介绍 | 在线文档">
    <meta property="og:title" content="介绍 | 在线文档">
  </head>
  <body>
    <div id="app"><!--[--><div class="theme"><header class="nav-bar" data-v-23ef83fe><div class="sidebar-button" data-v-23ef83fe><svg class="icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z" class></path></svg></div><a class="nav-bar-title" href="/onlinedocx/" aria-label="在线文档, back to home" data-v-23ef83fe data-v-dc837cb8><img class="logo" src="/onlinedocx/logo.png" alt="Logo" data-v-dc837cb8> 在线文档</a><div class="flex-grow" data-v-23ef83fe></div><div class="nav" data-v-23ef83fe><nav class="nav-links" data-v-23ef83fe data-v-0cf770ed><!--[--><div class="item" data-v-0cf770ed><div class="nav-dropdown-link" data-v-0cf770ed data-v-33970600><button class="button" data-v-33970600><span class="button-text" data-v-33970600>指南</span><span class="right button-arrow" data-v-33970600></span></button><ul class="dialog" data-v-33970600><!--[--><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-5978e1c0><a class="item" href="/onlinedocx/guide/introduction" data-v-5978e1c0><span class="arrow" data-v-5978e1c0></span><span class="text" data-v-5978e1c0>指南</span><span class="icon" data-v-5978e1c0><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-5978e1c0><a class="item" href="/onlinedocx/dep/i18n" data-v-5978e1c0><span class="arrow" data-v-5978e1c0></span><span class="text" data-v-5978e1c0>深入</span><span class="icon" data-v-5978e1c0><!----></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-0cf770ed><div class="nav-dropdown-link" data-v-0cf770ed data-v-33970600><button class="button" data-v-33970600><span class="button-text" data-v-33970600>组件</span><span class="right button-arrow" data-v-33970600></span></button><ul class="dialog" data-v-33970600><!--[--><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-5978e1c0><a class="item" href="/onlinedocx/components/introduction_com" data-v-5978e1c0><span class="arrow" data-v-5978e1c0></span><span class="text" data-v-5978e1c0>介绍</span><span class="icon" data-v-5978e1c0><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-5978e1c0><a class="item" href="/onlinedocx/components/introduction" data-v-5978e1c0><span class="arrow" data-v-5978e1c0></span><span class="text" data-v-5978e1c0>全局组件</span><span class="icon" data-v-5978e1c0><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-5978e1c0><a class="item" href="/onlinedocx/components/introduction" data-v-5978e1c0><span class="arrow" data-v-5978e1c0></span><span class="text" data-v-5978e1c0>功能组件</span><span class="icon" data-v-5978e1c0><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-5978e1c0><a class="item" href="/onlinedocx/components/image-viewer" data-v-5978e1c0><span class="arrow" data-v-5978e1c0></span><span class="text" data-v-5978e1c0>函数式组件</span><span class="icon" data-v-5978e1c0><!----></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-0cf770ed><div class="nav-dropdown-link" data-v-0cf770ed data-v-33970600><button class="button" data-v-33970600><span class="button-text" data-v-33970600>示例</span><span class="right button-arrow" data-v-33970600></span></button><ul class="dialog" data-v-33970600><!--[--><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-5978e1c0><a class="item" href="/onlinedocx/components/introduction" data-v-5978e1c0><span class="arrow" data-v-5978e1c0></span><span class="text" data-v-5978e1c0>介绍</span><span class="icon" data-v-5978e1c0><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-5978e1c0><a class="item" href="/onlinedocx/components/mainapp" data-v-5978e1c0><span class="arrow" data-v-5978e1c0></span><span class="text" data-v-5978e1c0>主系统</span><span class="icon" data-v-5978e1c0><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-5978e1c0><a class="item" href="/onlinedocx/components/mapapp" data-v-5978e1c0><span class="arrow" data-v-5978e1c0></span><span class="text" data-v-5978e1c0>子系统一</span><span class="icon" data-v-5978e1c0><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-5978e1c0><a class="item" href="/onlinedocx/components/demoapp" data-v-5978e1c0><span class="arrow" data-v-5978e1c0></span><span class="text" data-v-5978e1c0>子系统二</span><span class="icon" data-v-5978e1c0><!----></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-0cf770ed><div class="nav-link" data-v-0cf770ed data-v-48f23096><a class="item" href="/onlinedocx/hooks/introduction" data-v-48f23096>常用Hooks <!----></a></div></div><div class="item" data-v-0cf770ed><div class="nav-dropdown-link" data-v-0cf770ed data-v-33970600><button class="button" data-v-33970600><span class="button-text" data-v-33970600>相关链接</span><span class="right button-arrow" data-v-33970600></span></button><ul class="dialog" data-v-33970600><!--[--><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-5978e1c0><a class="item isExternal" href="https://m608-preview.gitee.io/onlinedocx/guide/introduction.html" target="_blank" rel="noopener noreferrer" data-v-5978e1c0><span class="arrow" data-v-5978e1c0></span><span class="text" data-v-5978e1c0>在线预览</span><span class="icon" data-v-5978e1c0><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-5978e1c0><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-5978e1c0><a class="item isExternal" href="https://git.piesat.cn:10004/piecloud/PIE-SaaS/web/module-group/pie-smart-earth-web" target="_blank" rel="noopener noreferrer" data-v-5978e1c0><span class="arrow" data-v-5978e1c0></span><span class="text" data-v-5978e1c0>GitLab 智慧地球源码</span><span class="icon" data-v-5978e1c0><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-5978e1c0><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-5978e1c0><a class="item isExternal" href="https://gitee.com/mzy_sw/onlineDoc.git" target="_blank" rel="noopener noreferrer" data-v-5978e1c0><span class="arrow" data-v-5978e1c0></span><span class="text" data-v-5978e1c0>GitLab 智慧地球在线文档源码</span><span class="icon" data-v-5978e1c0><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-5978e1c0><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-5978e1c0><a class="item isExternal" href="https://localhost:3000/CHANGELOG.md" target="_blank" rel="noopener noreferrer" data-v-5978e1c0><span class="arrow" data-v-5978e1c0></span><span class="text" data-v-5978e1c0>版本更新日志</span><span class="icon" data-v-5978e1c0><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-5978e1c0><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><!--]--><!----><!-- <div v-if="repo" class="item">
      <NavLink :item="repo" />
    </div> --></nav></div><div class="nav-icons" data-v-23ef83fe><div class="item" data-v-23ef83fe><button class="nav-btn" aria-label="Toggle Theme" data-v-23ef83fe><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1.2em" height="1.2em" preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" style="display:none;"><path d="M10 7a7 7 0 0 0 12 4.9v.1c0 5.523-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2h.1A6.979 6.979 0 0 0 10 7zm-6 5a8 8 0 0 0 15.062 3.762A9 9 0 0 1 8.238 4.938A7.999 7.999 0 0 0 4 12z" fill="currentColor"></path></svg><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1.2em" height="1.2em" preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" style=""><path d="M12 18a6 6 0 1 1 0-12a6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8a4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636L5.636 7.05L3.515 4.93zM16.95 18.364l1.414-1.414l2.121 2.121l-1.414 1.414l-2.121-2.121zm2.121-14.85l1.414 1.415l-2.121 2.121l-1.414-1.414l2.121-2.121zM5.636 16.95l1.414 1.414l-2.121 2.121l-1.414-1.414l2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z" fill="currentColor"></path></svg></button></div><div class="item" data-v-23ef83fe><a class="nav-btn" href="https://git.piesat.cn:10004/piecloud/PIE-SaaS/web/module-group/pie-smart-earth-web" target="_blank" aria-label="View GitHub Repo" data-v-23ef83fe><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1.2em" height="1.2em" preserveaspectratio="xMidYMid meet" viewbox="0 0 24 24" data-v-23ef83fe><path d="M5.883 18.653c-.3-.2-.558-.455-.86-.816a50.32 50.32 0 0 1-.466-.579c-.463-.575-.755-.84-1.057-.949a1 1 0 0 1 .676-1.883c.752.27 1.261.735 1.947 1.588c-.094-.117.34.427.433.539c.19.227.33.365.44.438c.204.137.587.196 1.15.14c.023-.382.094-.753.202-1.095C5.38 15.31 3.7 13.396 3.7 9.64c0-1.24.37-2.356 1.058-3.292c-.218-.894-.185-1.975.302-3.192a1 1 0 0 1 .63-.582c.081-.024.127-.035.208-.047c.803-.123 1.937.17 3.415 1.096A11.731 11.731 0 0 1 12 3.315c.912 0 1.818.104 2.684.308c1.477-.933 2.613-1.226 3.422-1.096c.085.013.157.03.218.05a1 1 0 0 1 .616.58c.487 1.216.52 2.297.302 3.19c.691.936 1.058 2.045 1.058 3.293c0 3.757-1.674 5.665-4.642 6.392c.125.415.19.879.19 1.38a300.492 300.492 0 0 1-.012 2.716a1 1 0 0 1-.019 1.958c-1.139.228-1.983-.532-1.983-1.525l.002-.446l.005-.705c.005-.708.007-1.338.007-1.998c0-.697-.183-1.152-.425-1.36c-.661-.57-.326-1.655.54-1.752c2.967-.333 4.337-1.482 4.337-4.66c0-.955-.312-1.744-.913-2.404a1 1 0 0 1-.19-1.045c.166-.414.237-.957.096-1.614l-.01.003c-.491.139-1.11.44-1.858.949a1 1 0 0 1-.833.135A9.626 9.626 0 0 0 12 5.315c-.89 0-1.772.119-2.592.35a1 1 0 0 1-.83-.134c-.752-.507-1.374-.807-1.868-.947c-.144.653-.073 1.194.092 1.607a1 1 0 0 1-.189 1.045C6.016 7.89 5.7 8.694 5.7 9.64c0 3.172 1.371 4.328 4.322 4.66c.865.097 1.201 1.177.544 1.748c-.192.168-.429.732-.429 1.364v3.15c0 .986-.835 1.725-1.96 1.528a1 1 0 0 1-.04-1.962v-.99c-.91.061-1.662-.088-2.254-.485z" fill="currentColor"></path></svg></a></div></div><!--[--><!--]--></header><!--[--><aside class="sidebar" data-v-3e48a26e><nav class="nav-links nav" data-v-3e48a26e data-v-0cf770ed><!--[--><div class="item" data-v-0cf770ed><div class="nav-dropdown-link" data-v-0cf770ed data-v-33970600><button class="button" data-v-33970600><span class="button-text" data-v-33970600>指南</span><span class="right button-arrow" data-v-33970600></span></button><ul class="dialog" data-v-33970600><!--[--><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-5978e1c0><a class="item" href="/onlinedocx/guide/introduction" data-v-5978e1c0><span class="arrow" data-v-5978e1c0></span><span class="text" data-v-5978e1c0>指南</span><span class="icon" data-v-5978e1c0><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-5978e1c0><a class="item" href="/onlinedocx/dep/i18n" data-v-5978e1c0><span class="arrow" data-v-5978e1c0></span><span class="text" data-v-5978e1c0>深入</span><span class="icon" data-v-5978e1c0><!----></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-0cf770ed><div class="nav-dropdown-link" data-v-0cf770ed data-v-33970600><button class="button" data-v-33970600><span class="button-text" data-v-33970600>组件</span><span class="right button-arrow" data-v-33970600></span></button><ul class="dialog" data-v-33970600><!--[--><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-5978e1c0><a class="item" href="/onlinedocx/components/introduction_com" data-v-5978e1c0><span class="arrow" data-v-5978e1c0></span><span class="text" data-v-5978e1c0>介绍</span><span class="icon" data-v-5978e1c0><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-5978e1c0><a class="item" href="/onlinedocx/components/introduction" data-v-5978e1c0><span class="arrow" data-v-5978e1c0></span><span class="text" data-v-5978e1c0>全局组件</span><span class="icon" data-v-5978e1c0><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-5978e1c0><a class="item" href="/onlinedocx/components/introduction" data-v-5978e1c0><span class="arrow" data-v-5978e1c0></span><span class="text" data-v-5978e1c0>功能组件</span><span class="icon" data-v-5978e1c0><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-5978e1c0><a class="item" href="/onlinedocx/components/image-viewer" data-v-5978e1c0><span class="arrow" data-v-5978e1c0></span><span class="text" data-v-5978e1c0>函数式组件</span><span class="icon" data-v-5978e1c0><!----></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-0cf770ed><div class="nav-dropdown-link" data-v-0cf770ed data-v-33970600><button class="button" data-v-33970600><span class="button-text" data-v-33970600>示例</span><span class="right button-arrow" data-v-33970600></span></button><ul class="dialog" data-v-33970600><!--[--><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-5978e1c0><a class="item" href="/onlinedocx/components/introduction" data-v-5978e1c0><span class="arrow" data-v-5978e1c0></span><span class="text" data-v-5978e1c0>介绍</span><span class="icon" data-v-5978e1c0><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-5978e1c0><a class="item" href="/onlinedocx/components/mainapp" data-v-5978e1c0><span class="arrow" data-v-5978e1c0></span><span class="text" data-v-5978e1c0>主系统</span><span class="icon" data-v-5978e1c0><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-5978e1c0><a class="item" href="/onlinedocx/components/mapapp" data-v-5978e1c0><span class="arrow" data-v-5978e1c0></span><span class="text" data-v-5978e1c0>子系统一</span><span class="icon" data-v-5978e1c0><!----></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-5978e1c0><a class="item" href="/onlinedocx/components/demoapp" data-v-5978e1c0><span class="arrow" data-v-5978e1c0></span><span class="text" data-v-5978e1c0>子系统二</span><span class="icon" data-v-5978e1c0><!----></span></a></div></li><!--]--></ul></div></div><div class="item" data-v-0cf770ed><div class="nav-link" data-v-0cf770ed data-v-48f23096><a class="item" href="/onlinedocx/hooks/introduction" data-v-48f23096>常用Hooks <!----></a></div></div><div class="item" data-v-0cf770ed><div class="nav-dropdown-link" data-v-0cf770ed data-v-33970600><button class="button" data-v-33970600><span class="button-text" data-v-33970600>相关链接</span><span class="right button-arrow" data-v-33970600></span></button><ul class="dialog" data-v-33970600><!--[--><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-5978e1c0><a class="item isExternal" href="https://m608-preview.gitee.io/onlinedocx/guide/introduction.html" target="_blank" rel="noopener noreferrer" data-v-5978e1c0><span class="arrow" data-v-5978e1c0></span><span class="text" data-v-5978e1c0>在线预览</span><span class="icon" data-v-5978e1c0><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-5978e1c0><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-5978e1c0><a class="item isExternal" href="https://git.piesat.cn:10004/piecloud/PIE-SaaS/web/module-group/pie-smart-earth-web" target="_blank" rel="noopener noreferrer" data-v-5978e1c0><span class="arrow" data-v-5978e1c0></span><span class="text" data-v-5978e1c0>GitLab 智慧地球源码</span><span class="icon" data-v-5978e1c0><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-5978e1c0><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-5978e1c0><a class="item isExternal" href="https://gitee.com/mzy_sw/onlineDoc.git" target="_blank" rel="noopener noreferrer" data-v-5978e1c0><span class="arrow" data-v-5978e1c0></span><span class="text" data-v-5978e1c0>GitLab 智慧地球在线文档源码</span><span class="icon" data-v-5978e1c0><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-5978e1c0><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><li class="dialog-item" data-v-33970600><div class="nav-dropdown-link-item" data-v-33970600 data-v-5978e1c0><a class="item isExternal" href="https://localhost:3000/CHANGELOG.md" target="_blank" rel="noopener noreferrer" data-v-5978e1c0><span class="arrow" data-v-5978e1c0></span><span class="text" data-v-5978e1c0>版本更新日志</span><span class="icon" data-v-5978e1c0><svg class="icon outbound" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15" data-v-5978e1c0><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></span></a></div></li><!--]--></ul></div></div><!--]--><!----><!-- <div v-if="repo" class="item">
      <NavLink :item="repo" />
    </div> --></nav><!--[--><!--]--><ul class="sidebar-links" data-v-3e48a26e><!--[--><li class="sidebar-link"><p class="sidebar-link-item">指南</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item active" href="/onlinedocx/guide/introduction">介绍</a><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="#需要掌握的基础知识">需要掌握的基础知识</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#框架图">框架图</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#框架关联图">框架关联图</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#目录结构">目录结构</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#插件化">插件化</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#浏览器支持">浏览器支持</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="#ide推荐">IDE推荐</a><!----></li></ul></li><li class="sidebar-link"><a class="sidebar-link-item" href="/onlinedocx/guide/">开始</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/onlinedocx/guide/settings">项目配置</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/onlinedocx/guide/router">路由</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/onlinedocx/guide/component">组件注册</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/onlinedocx/guide/design">样式</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/onlinedocx/guide/deploy">构建</a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item">开发</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/onlinedocx/guide/specification">开发指南</a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item">可视化</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/onlinedocx/visualization/index">可视化</a><!----></li></ul></li><li class="sidebar-link"><p class="sidebar-link-item">深入</p><ul class="sidebar-links"><li class="sidebar-link"><a class="sidebar-link-item" href="/onlinedocx/dep/i18n">国际化</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/onlinedocx/dep/lint">项目规范</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/onlinedocx/dep/theme">主题设置</a><!----></li><li class="sidebar-link"><a class="sidebar-link-item" href="/onlinedocx/dep/ssr">SSR</a><!----></li></ul></li><li class="sidebar-link"><a class="sidebar-link-item" href="/onlinedocx/guide/fqa">常见问题</a><!----></li><!--]--></ul><!--[--><!--]--></aside><!-- <Slugs /> --><!--]--><!-- TODO: make this button accessible --><div class="sidebar-mask"></div><main class="page" data-v-4c107763><div class="container" data-v-4c107763><!--[--><!--]--><div class="content" data-v-4c107763><div data-v-4c107763><!--
 * @Date: 2024-04-17 14:42:24
 * @LastEditTime: 2024-04-17 16:01:42
 * @FilePath: \online-doc\guide\introduction.md
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
--><h1 id="介绍"><a class="header-anchor" href="#介绍" aria-hidden="true">#</a> 介绍</h1><p>整体框架采用微前端结构搭建,主应用、子应用可以单独运行、部署。每个子应用可以由不同的团队进行管理，并可以自主选择框架，独立开发、测试、部署等。</p><h2 id="需要掌握的基础知识"><a class="header-anchor" href="#需要掌握的基础知识" aria-hidden="true">#</a> 需要掌握的基础知识</h2><p>本项目需要一定前端基础知识，请确保掌握 Vue 的基础知识，以便能处理一些常见的问题。</p><p>为了能快速上手本项目，请先大致浏览一遍文档及在线示例。</p><p>建议在开发前先学一下以下内容，提前了解和学习这些知识，会对项目理解非常有帮助:</p><ul><li><a href="https://v3.vuejs.org/" target="_blank" rel="noopener noreferrer">Vue3</a></li><li><a href="https://pinia.vuejs.org/" target="_blank" rel="noopener noreferrer">Pinia</a></li><li><a href="https://www.typescriptlang.org/" target="_blank" rel="noopener noreferrer">TypeScript</a></li><li><a href="https://next.router.vuejs.org/" target="_blank" rel="noopener noreferrer">Vue-router</a></li><li><a href="https://element-plus.org/" target="_blank" rel="noopener noreferrer">Element-plus</a></li><li><a href="https://es6.ruanyifeng.com/" target="_blank" rel="noopener noreferrer">Es6</a></li><li><a href="https://vitejs.dev/" target="_blank" rel="noopener noreferrer">Vitejs</a></li><li><a href="https://unocss.dev/" target="_blank" rel="noopener noreferrer">unocss</a></li><li><a href="https://axios-http.com/" target="_blank" rel="noopener noreferrer">Axios</a></li><li><a href="https://lesscss.org/" target="_blank" rel="noopener noreferrer">Less</a></li></ul><h1 id="整体框架介绍"><a class="header-anchor" href="#整体框架介绍" aria-hidden="true">#</a> 整体框架介绍</h1><p>整个项目架构采用的是微前端架构，将一个大型前端应用拆分成多个小的前端应用，每个应用都有自己独立的技术栈，独立开发和部署，最后通过一定的机制组合成完整的应用</p><h2 id="框架图"><a class="header-anchor" href="#框架图" aria-hidden="true">#</a> 框架图</h2><p><img src="/onlinedocx/images/work.png" alt=""></p><h2 id="框架关联图"><a class="header-anchor" href="#框架关联图" aria-hidden="true">#</a> 框架关联图</h2><p><img src="/onlinedocx/images/work3.png" alt=""></p><h2 id="目录结构"><a class="header-anchor" href="#目录结构" aria-hidden="true">#</a> 目录结构</h2><div class="language-"><pre><code>.
├── assets # 公共静态资源
├── applications # 子应用
│   ├── mapApp # 子应用一
│   │   ├── public # 子应用静态资源
│   │   ├── src # 子应用代码
│   │   │   ├── api # api接口管理
│   │   │   ├── assets # 子应用单独使用静态资源
│   │   │   ├── components # 公用组件
│   │   │   ├── config # 配置工具
│   │   │   ├── hooks # 子应用常用hooks
│   │   │   ├── router # 路由配置
│   │   │   ├── store # 状态管理
│   │   │   ├── types # 类型声明
│   │   │   ├── utils # 全局工具类
│   │   │   │   ├── axios # axios配置
│   │   │   │   └── common # 全局工具
│   │   │   ├── views # 路由页面
│   │   │   ├── App.vue # 入口vue文件
│   │   │   └── main.ts # 主入口文件
│   │   └── index.html # 入口页面
│   └── DemoApp # 子应用二
├── businessCom # 公共业务组件
├── mainApp # 主应用 
├── ├── public # 资源目录
├── │   ├── systemConfig # 子应用代码
├── │   │   ├── microApps.js # 外置子应用注册配置数据
├── │   │   ├── urlConfig.js # 外置主系统相关服务地址配置
├── │   ├── staticSource # 用于放置不需要参与打包的静态资源 
├── │   ├── ueSDK # UE适配Web端的SDK库
├── │   └── MEarthUnminified # Mearth的SDK库
├── ├── src # 代码目录
├── │   ├── api # 存放业务服务请求方法
├── │   ├── assets # 静态资源
├── │   ├── components # 主应用的业务组件
├── │   ├── config # 配置信息
├── │   ├── hooks # 公共钩子函数
├── │   ├── layout # 布局组件
├── │   ├── router # 路由配置
├── │   ├── store # 状态管理
├── │   ├── styles # 全局样式
├── │   ├── types # 全局类型定义
├── │   ├── utils # 公共方法库
├── │   ├── viewes # 页面组件
├── │   ├── App.vue # 首页主入口
├── │   ├── main.ts # 环境初始化入口
├── └── tsconfig.json # typescript环境配置信息
├── packages # 公共常用组件
│   ├── PIEButton # 公共按钮组件
│   ├── PIETable # 公共表格组件
│   ├── ...
│   ├── theme-default # 组件对应默认样式
│   │   ├── index.less # 样式入口文件
│   │   ├── PIEButton.less # 公共按钮组件样式
│   │   ├── PIETable.less # 公共表格组件样式
│   │   └── ... 
│   └── index.ts # 组件入口文件
├── style # 全局样式
├── hooks # 全局公用方法，主应用、子应用都可以调用
├── i18n # 全局公用方法，实现多语言切换
├── .gitignore # git 忽略文件配置
├── package-lock.json # 锁定包的版本
├── package.json # 配置文件
├── tsconfig.json # typescript 配置
├── prettier.config.js # 代码格式化工具配置
├── README.md # 中文 README
└── vite.config.ts # vite 配置 

</code></pre></div><h2 id="插件化"><a class="header-anchor" href="#插件化" aria-hidden="true">#</a> 插件化</h2><p>主应用集成wujie微框架，提供了对子应用管理操作及通信功能，以下列出常用功能</p><ul><li><p>子应用注册（对应文件：/mainApp/src/utils/wujie/index.ts）</p><p>注：主框架已经封装了WujieContainer.vue组件来自动调用以下方法，理论上不需要单独调用，但是依然提供这些接口供特殊情况下使用</p></li></ul><table><thead><tr><th>方法名称</th><th>方法说明</th></tr></thead><tbody><tr><td>setupApps</td><td>注册子应用，支持批量注册</td></tr><tr><td>startApps</td><td>打开子应用，支持批量打开</td></tr><tr><td>preloadApps</td><td>预加载子应用，支持批量预加载，可以提升子应用首次打开速度，但是会对主应用的网络线程有一定影响</td></tr><tr><td>destroyApps</td><td>销毁子应用，支持批量销毁</td></tr><tr><td>sendMessage</td><td>发送消息给已经打开的子应用</td></tr></tbody></table><ul><li>管理子应用（对应文件：/mainApp/src/store/modules/app.ts）：</li></ul><table><thead><tr><th>方法名称</th><th>方法说明</th></tr></thead><tbody><tr><td>setCurrentApps</td><td>打开子应用，支持批量打开，该方法会替换已打开的子应用</td></tr><tr><td>addMicroApp</td><td>打开子应用，该方法会追加，不会替换已有的子应用</td></tr><tr><td>sendMsgToApp</td><td>发送信息给子应用</td></tr><tr><td>clearMicroApps</td><td>关闭所有的子应用</td></tr><tr><td>closeMicroApp</td><td>关闭指定的子应用</td></tr></tbody></table><ul><li>注册及打开子应用时需要的参数</li></ul><div class="language-json"><pre><code> <span class="token punctuation">{</span>
     name：<span class="token string">&quot;appCode&quot;</span><span class="token punctuation">,</span>    <span class="token comment">//&quot;子应用code（需要确保唯一性，必须）&quot;</span>
     url：<span class="token string">&quot;xxxx&quot;</span><span class="token punctuation">,</span>        <span class="token comment">//&quot;子应用的发布路径（必须）&quot;</span>
     title：<span class="token string">&quot;子应用&quot;</span>，     <span class="token comment">//&quot;子应用中文名称（非必须）&quot;</span>
     desc：<span class="token string">&quot;子应用说明&quot;</span>，   <span class="token comment">//&quot;子应用的简介（非必须）&quot;</span>
     exec：<span class="token boolean">false</span><span class="token punctuation">,</span>         <span class="token comment">//&quot;是否使用预执行模式（非必须）&quot;</span>
     sync：<span class="token boolean">false</span><span class="token punctuation">,</span>         <span class="token comment">//&quot;路由同步开关（非必须）&quot;</span>
     fiber：<span class="token boolean">false</span><span class="token punctuation">,</span>        <span class="token comment">//&quot;js是否使用fiber模式执行（非必须）&quot;</span>
     alive：<span class="token boolean">false</span><span class="token punctuation">,</span>        <span class="token comment">//&quot;是否保活，保活的子应用不会销毁，会驻留在内存中（非必须）&quot;</span>
     props：<span class="token punctuation">{</span>xxx<span class="token punctuation">}</span>         <span class="token comment">//&quot;注入给子应用的数据（非必须）&quot;</span>
 <span class="token punctuation">}</span>
</code></pre></div><ul><li>主应用下发给子应用的数据格式（对应文件：/mainApp/src/components/WujieContainer/WujieContainer.ts）</li></ul><div class="language-json"><pre><code> <span class="token punctuation">{</span>
  	data<span class="token operator">:</span><span class="token punctuation">{</span>                        <span class="token comment">// 传递给子应用的数据和对象</span>
       appName<span class="token operator">:</span><span class="token string">&quot;appCode&quot;</span><span class="token punctuation">,</span>         <span class="token comment">// 子应用code</span>
       chatMessage<span class="token operator">:</span><span class="token string">&quot;xxxx&quot;</span><span class="token punctuation">,</span>        <span class="token comment">// 天权大模型返回的业务数据</span>
       mainEarthViewer<span class="token operator">:</span><span class="token string">&quot;xxxx&quot;</span><span class="token punctuation">,</span>    <span class="token comment">// 主应用里Earth球实例化对象</span>
       mainEarth<span class="token operator">:</span><span class="token string">&quot;xxxx&quot;</span><span class="token punctuation">,</span>          <span class="token comment">// 主应用的MEarth对象</span>
       mainUEViewer<span class="token operator">:</span><span class="token string">&quot;xxxx&quot;</span><span class="token punctuation">,</span>       <span class="token comment">// 主应用的UE实例化对象</span>
       mainUE<span class="token operator">:</span><span class="token string">&quot;xxxx&quot;</span>              <span class="token comment">// 主应用的UE静态方法对象</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>                            
    methods<span class="token operator">:</span><span class="token punctuation">{</span><span class="token punctuation">}</span>                    <span class="token comment">// 传递给子应用的方法（暂定后续补充）</span>
 <span class="token punctuation">}</span>
</code></pre></div><ul><li>UE相关方法（对应文件：/mainApp/src/utils/ue/index.ts）</li></ul><p>对于UE场景，主应用提供了公共方法给子应用，用来和UE进行交互，子应用通过”data.mainUE.方法名“进行调用</p><table><thead><tr><th>方法名称</th><th>方法说明</th></tr></thead><tbody><tr><td>openUEViewer</td><td>打开UE窗口</td></tr><tr><td>closeUEViewer</td><td>关闭UE窗口</td></tr><tr><td>todoCommand</td><td>执行UE命令</td></tr><tr><td>lookAt</td><td>定位到指定位置</td></tr><tr><td>flyTo</td><td>飞行到执行位置</td></tr><tr><td>setTime</td><td>设置UE场景时间</td></tr><tr><td>setWeather</td><td>设置UE场景天气现象</td></tr></tbody></table><h2 id="浏览器支持"><a class="header-anchor" href="#浏览器支持" aria-hidden="true">#</a> 浏览器支持</h2><p><strong>本地开发</strong>推荐使用<code>Chrome 最新版</code>浏览器。</p><p>由于 Vue 3 不再支持 IE11，本项目也不支持 IE。</p><table><thead><tr><th style="text-align:center;"><a href="http://godban.github.io/browsers-support-badges/" target="_blank" rel="noopener noreferrer"><img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px"></a>Firefox</th><th style="text-align:center;"><a href="http://godban.github.io/browsers-support-badges/" target="_blank" rel="noopener noreferrer"><img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px"></a>Chrome</th><th style="text-align:center;"><a href="http://godban.github.io/browsers-support-badges/" target="_blank" rel="noopener noreferrer"><img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px"></a>Safari</th></tr></thead><tbody><tr><td style="text-align:center;">last 100 versions</td><td style="text-align:center;">last 90 versions</td><td style="text-align:center;">last 2 versions</td></tr></tbody></table><h2 id="ide推荐"><a class="header-anchor" href="#ide推荐" aria-hidden="true">#</a> IDE推荐</h2><ul><li><a href="https://code.visualstudio.com/" target="_blank" rel="noopener noreferrer">VSCode</a></li></ul></div></div><footer class="page-footer" data-v-4c107763 data-v-126fe9ba><div class="updated" data-v-126fe9ba><!----></div></footer><div class="next-and-prev-link" data-v-4c107763 data-v-0002a634><div class="container" data-v-0002a634><div class="prev" data-v-0002a634><!----></div><div class="next" data-v-0002a634><a class="link" href="/onlinedocx/guide/" data-v-0002a634><span class="text" data-v-0002a634>开始</span><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" class="icon icon-next" data-v-0002a634><path d="M19.9,12.4c0.1-0.2,0.1-0.5,0-0.8c-0.1-0.1-0.1-0.2-0.2-0.3l-7-7c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l5.3,5.3H5c-0.6,0-1,0.4-1,1s0.4,1,1,1h11.6l-5.3,5.3c-0.4,0.4-0.4,1,0,1.4c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3l7-7C19.8,12.6,19.9,12.5,19.9,12.4z"></path></svg></a></div></div></div><!--[--><!--]--></div></main></div><!----><!--]--></div>
    <script>__VP_HASH_MAP__ = JSON.parse("{\"index.md\":\"6cb2edcd\",\"readme.md\":\"2102e4ff\",\"components_demoapp.md\":\"fa6343ea\",\"components_introduction.md\":\"d8d460b8\",\"components_introduction_com.md\":\"9951ea9d\",\"components_mainapp.md\":\"ae0d2342\",\"components_mapapp.md\":\"a505b547\",\"components_piebutton.md\":\"883f5dc7\",\"components_piemodal.md\":\"4eb4a4d2\",\"components_piepage.md\":\"5f1eb831\",\"components_piepanel.md\":\"7168684d\",\"components_pieswitchlang.md\":\"ce7ac1ed\",\"components_pietable.md\":\"04661233\",\"components_sticky.md\":\"0df4d142\",\"dep_dark.md\":\"4e86f7fe\",\"dep_i18n.md\":\"eb35758e\",\"dep_lint.md\":\"ca871644\",\"dep_ssr.md\":\"b2dfe318\",\"dep_theme.md\":\"71bfaf39\",\"guide_auth.md\":\"d7b4a528\",\"guide_component.md\":\"b984b86d\",\"guide_deploy.md\":\"37e87483\",\"guide_design.md\":\"855d9149\",\"guide_fqa.md\":\"ac88244b\",\"guide_index.md\":\"2b07d676\",\"guide_introduction.md\":\"3fa71234\",\"guide_maindoc.md\":\"48309c5d\",\"guide_router.md\":\"ae436954\",\"guide_settings.md\":\"4748e13a\",\"guide_specification.md\":\"f1f55221\",\"guide_version.md\":\"7b201b4e\",\"hooks_introduction.md\":\"31936081\",\"hooks_useclipboard.md\":\"e9631906\",\"hooks_usecrudschemas.md\":\"3a0e4601\",\"hooks_usenetwork.md\":\"a7397dc9\",\"hooks_usestorage.md\":\"e3909a5f\",\"hooks_usetagsview.md\":\"4269b6f2\",\"hooks_usewatermark.md\":\"5bc7cf84\",\"visualization_index.md\":\"825518c0\"}")</script>
    <script type="module" async src="/onlinedocx/assets/app.a6a2ebb4.js"></script>
  </body>
</html>